<template>
  <div style="width:100%;height:100%" class="position-relative">
    <index-header style="top:0;z-index:2" />
    <div class="h-87">
      <div style="width:16%;height:98%" class="f-l">
        <div class="card " style="width:100%">
          <img src="~@/assets/img/left.png" style="vertical-align: middle; padding-bottom:6px" alt="" /> <span class="myfont">全部数据指标</span>
        </div>
        <div class="item-list" style="width:100%;height: calc(100% - 75px);">
          <div v-for="(items, index) in itemlist" :key="index" class="item" style="" @click="getAnnualStatistics(items)">
            <div v-if="items.code == '' || items.code == null" class="item" style="opacity:0.5">{{ items.name }}</div>
            <div v-else class="item pointer" :class="typeCode == items.code ? 'checked' : ''">{{ items.name }}</div>
          </div>
        </div>
      </div>
      <div class="chart-box f-l">
        <div style="width:100%;height:10%;">
          <div class="title " style="width:100%; padding:0 20px">
            <div class=" f-l myfont">{{ name }}</div>
            <div class="f-40">· · ·</div>
            <div class=" f-l " style=" padding-left:40px"><img src="~@/assets/img/top.png" alt="" /> 同比增长:-</div>
            <div class=" f-l  " style=" padding-left:40px"><img src="~@/assets/img/bottom.png" alt="" /> 环比下降:-</div>
            <div class="f-r">
              <template>
                <el-radio v-model="radio" label="年">年</el-radio>
                <el-radio v-model="radio" disabled label="月">月</el-radio>
                <el-radio v-model="radio" disabled label="日">日</el-radio>
              </template>
              <template>
                <el-select v-model="label" placeholder="请选择乡镇">
                  <el-option label="全部" value="shanghai" />
                  <!-- <el-option label="杨陵街道" value="shanghai" />
                  <el-option label="五泉镇" value="shanghai" />
                  <el-option label="李台乡" value="shanghai" />
                  <el-option label="杨村乡" value="shanghai" />
                  <el-option label="大寨乡" value="shanghai" />
                  <el-option label="揉谷镇" value="shanghai" /> -->
                </el-select>
              </template>
            </div>
          </div>
        </div>
        <div style="width:100%;height:90%;padding:0 20px 20px">
          <v-chart v-if="isShow" :options="options" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import YlCharts from '@/components/Charts/ylCharts.vue'
import IndexHeader from '../component/IndexHeader2.vue'
import { businessData, getAnnualStatistics } from '@/api/connector'
export default {
  name: 'Fourstage',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    YlCharts,
    IndexHeader
  },
  data() {
    return {
      radio: '年',
      label: '全部',
      isShow: false,
      code: '',
      typeCode: '',
      itemlist: [],
      options: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均值1', '平均值2', '平均值3'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          name: '年',
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7'],
          textStyle: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: { color: '#fff' }
          }
        },
        yAxis: {
          name: ' ',
          type: 'value',
          axisLine: {
            lineStyle: { color: '#fff' }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: []
      }
    }
  },
  mounted() {
    this.businessData()
  },
  methods: {
    businessData() {
      if (this.$route.query.typeCode === undefined) {
        businessData({
          type: this.$route.query.code
        }).then((res) => {
          this.itemlist = res.body.data

          this.name = this.itemlist[0].name
          this.getAnnualStatistics(this.itemlist[0])
        })
      } else {
        businessData({
          type: this.$route.query.code
        }).then((res) => {
          this.itemlist = res.body.data
          console.log(this.itemlist.find((item) => item.name === this.$route.query.typeCode).code)
          this.getAnnualStatistics(this.itemlist.find((item) => item.name === this.$route.query.typeCode))
        })
      }
    },
    getAnnualStatistics(item) {
      this.isShow = false
      console.log(item)
      if (item.code !== null) {
        this.typeCode = item.code
        this.name = item.name
        const params = {
          typeCode: item.code
        }
        getAnnualStatistics(params).then((res) => {
          const colorArr = ['#3599d8', '#6546fd']
          const data = res.body
          this.options.legend.data = data.legendData
          this.options.xAxis.data = data.xAxisData
          this.options.yAxis.name = data.yAxisUnit
          this.options.series = data.seriesData.map((item, index) => {
            return {
              name: item.name,
              data: item.value,
              type: 'line',
              smooth: false,
              itemStyle: {
                normal: {
                  borderColor: '#e9f7ff',
                  borderWidth: 1,
                  lineStyle: {
                    color: colorArr[index]
                  }
                }
              }
            }
          })
          setTimeout(() => {
            this.isShow = true
          }, 10)
        })
      }
    }
  }
}
</script>
<style lang="scss">
* {
  padding: 0;
}
#app {
  height: 100%;
}
.item-list {
  // max-height: 86.4%;
  border: 1px solid #155277;
  overflow: auto;
  scroll-behavior: smooth;
}

.item-list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.item-list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #4e5b65;
  // background-image: -webkit-linear-gradient(
  //   45deg,
  //   rgba(255, 255, 255, 0.2) 25%,
  //   transparent 25%,
  //   transparent 50%,
  //   rgba(255, 255, 255, 0.2) 50%,
  //   rgba(255, 255, 255, 0.2) 75%,
  //   transparent 75%,
  //   transparent
  // );
}
.item-list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // background: #1a5a7d;
  border-radius: 10px;
}

.item {
  border-bottom: 1px solid #155277;
  background: rgba(19, 34, 53, 0.8);
}

.checked {
  background: #192f4b;
  border: solid 1px #155277;
}

.app-container {
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
}
.chart-box {
  height: 98%;
  width: 80%;
  margin-left: 2%;
  line-height: 75px;
  border: 1px solid #155277;
  box-sizing: border-box;
  background: #132235;
  opacity: 0.8;
}
.chart-box[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
  background-size: 100% 100% !important;
}
.item-list .item {
  width: 100%;
  text-align: center;
  height: 68px;
  line-height: 68px;
  color: #fff;
}
.title {
  font-size: 18px;
  height: 68px;
  line-height: 68px;
  border-bottom: 1px solid #155277;
  color: rgba(255, 255, 255, 1);
}
.myfont {
  font-family: myfont;
  font-size: 24px;
  background-image: -webkit-linear-gradient(bottom, #082942, #dff5fe, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 999;
}
.f-l {
  float: left;
}
.f-r {
  float: right;
}
.card {
  height: 75px;
  line-height: 75px;
  text-align: center;
  font-family: myfont;
  background: url(~@/assets/img/card.png) no-repeat;
  background-size: 100% 100%;
  color: rgba(255, 255, 255, 1);
}
.el-input__inner {
  background-color: #1b2b4c;
  border: 1px solid #26455f;
}
.el-radio__inner {
  background: #153155;
}
.el-radio {
  color: #fff;
}
.el-radio__input.is-checked .el-radio__inner {
  background: #153155;
  color: #ffffff !important;
}
input {
  -webkit-text-fill-color: #fff;
}
.f-40 {
  padding-left: 24px;
  font-size: 40px;
  color: #30616e;
  float: left;
}
.el-select-dropdown {
  background-color: #2a436a;
  color: #ffffff;
}
.el-select-dropdown__item.hover {
  background-color: #1e365a;
  color: #ffffff;
}
.el-select-dropdown__item.selected {
  color: #ffffff;
}
.el-select-dropdown__item {
  color: #ffffff;
}
.el-select-dropdown{
  border: 0;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color: #2a436a;
  top: 0px;
}
</style>
